<template>
  <div class="newposAttenuation" :style="$store.state.app.language === 'en' || $store.state.app.language === 'ko' ? 'padding: 0 33px;' : ''">
    <!-- 权重即将衰减 -->
    <p class="caption center" v-if="pool.attenuationStatus === 1">{{ $t('newpos.weightReduce', {number: pool.attenuationRate }) }}</p>
    <!-- 权重已衰减 -->
    <p class="caption center" style="color: #E51C23;" v-else-if="pool.attenuationStatus === 2">
      {{ $t('newpos.weightReduced', {number: pool.attenuationRate }) }}
    </p>
    <div class="word">
      <template v-if="pool.attenuationStatus === 1">
        <p>
          {{ $t('newpos.weightTime', {number: pool.attenuationRate }) }}
          {{ pool.attenuationDate | dateFormat }}
          {{ $t('newpos.weightTime1', {number: pool.attenuationRate }) }}
        </p>
        <p>{{ $t('newpos.BpIncomeWill', {number: pool.attenuationRate }) }}</p>
      </template>
      <template v-else-if="pool.attenuationStatus === 2">
        <p>
          {{ $t('newpos.weightTimes', {number: pool.attenuationRate }) }}
          {{ pool.attenuationDate | dateFormat }}
          {{ $t('newpos.weightTimes1', {number: pool.attenuationRate }) }}
        </p>
        <p>{{ $t('newpos.BpIncomeWill1', {number: pool.attenuationRate }) }}</p>
      </template>
      <p>{{ $t('newpos.confirmVote') }}</p>
      <p class="right" style="font-size: 14px;">
        <span class="colorThis" @click="whatVisible = true;">{{ $t('newpos.whatIsWeight') }}?</span>
      </p>
      <div class="flexc">
        <el-button type="warning"
        v-loading="loading"
        @click="handleAction"
        class="center btn">{{ $t('newpos.comnfirmToDelegate') }}</el-button>
      </div>
    </div>
    <!-- 什么是权重衰减 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="whatVisible"
      :show-close="false"
      append-to-body
      width="500px">
      <div class="whatAttenuation">
        <div class="whatAttenuationTit">
          <i class="iconfont el-icon-arrow-left" @click="whatVisible = false;"></i>
        </div>
        <div class="whatTit center">{{ $t('newpos.whatIsWeight') }}</div>
        <div class="whatCont">
          <p style="line-height: 25px;">{{ $t('newpos.accordingToEOS') }}</p>
          <p style="color: #ff9800;">{{ $t('newpos.confirmSecond') }}</p>
          <p style="line-height: 25px;">{{ $t('newpos.consideration') }}</p>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { EosModel } from '@/utils/eos';

export default {
  name: 'newposAttenuation', // 矿池衰减
  data() {
    return {
      loading: false,
      whatVisible: false, // 什么是权重衰减
      accountName: null, // 用户名
    }
  },
  components: {},
  props: {
    attenuationVisible: {
      type: Boolean,
      default: false
    },
    pool: Object,
    clicking: Number
  },
  watch: {
    attenuationVisible: function change(val) {
      if (val) {
        this.accountName = this.$store.state.app.scatter.identity.accounts[0].name;
      }
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.accountName = this.$store.state.app.scatter.identity.accounts[0].name;
  },
  beforeDestroy() {},
  methods: {
    handleAction() {
      this.loading = true;
      const account = this.$store.state.app.accountRes;
      const params = {
        proxy: account.proxy
      }
      EosModel.voteproducerAction(params, (res) => {
        this.loading = false;
        if (res.processed) {
          // 操作成功
          this.$message.success(this.$t('newpos.successfulOperation'));
          const attenuationLocal = JSON.parse(localStorage.getItem('attenuationDialog') || '{}');
          attenuationLocal[this.accountName] = null;
          localStorage.setItem('attenuationDialog', JSON.stringify(attenuationLocal));
          this.$emit('listenAttenuationVisible', 'close')
          return
        }
        EosModel.handleScatterErrorBack(res);
      });
    },
  },
}
</script>
<style lang="scss" scoped>
.colorThis {
  cursor: pointer;
}

.newposAttenuation {
  margin-top: -15px;
  padding: 0px 63px;

  .caption {
    color: #FF9800;
    font-size: 20px;
    margin-bottom: 30px;
  }

  .word {
    p {
      font-size: 16px;
      margin-bottom: 18px;
    }
  }

  .btn {
    width: 320px;
    margin-top: 30px;
  }
}

.whatAttenuation {
  position: relative;
  margin-top: -35px;
  padding: 15px 30px;

  .whatAttenuationTit {
    position: absolute;
    top: -5px;
    left: 10px;

    i {
      font-size: 26px;
      cursor: pointer;
    }
  }

  .whatTit {
    color: #FF9800;
    font-size: 20px;
    margin-bottom: 30px;
    margin-top: 10px;
  }

  .whatCont {
    font-size: 16px;

    p {
      margin-bottom: 20px;
    }
  }
}

.theme-1B1D27 {
  .newposAttenuation {
    .word {
      color: rgba(255, 255, 255, 0.6);
    }
  }
}
</style>

